<template>
  <view class="container">
    <navbar title="首页" titleColor="white" :isShowIcon="false"></navbar>
    <view>
      <view class="header1"> </view>
      <view class="body1">
        <view class="item1" @click="gotoOrderDetail(item.id)" v-for="item in userList" :key="item.id">
          <view class="item-issue-time1">联系时间：{{item.createTime}}</view>
          <view class="item-box1">
            <text class="contact-people">联系人：{{item.userName}}</text>
            <view class="item-main1">
              <image src="/static/images/Group48097783@2x.png" mode=""></image>
              <view class="item-userinfo1">
                <text>{{item.departure}}</text>
                <text>{{item.phone}}</text>
              </view>
            </view>
            <image class="middle-image" src="/static/images/Group2650@2x.png" mode=""></image>
            <view class="item-main1">
              <image src="/static/images/Group2648@2x.png" mode=""></image>
              <view class="item-userinfo1">
                <text>{{item.destination}}</text>
                <!-- <text>{{item.phone}}</text> -->
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="footer">
      <tabbar :index="1"></tabbar>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        userList: []
      };
    },
    onLoad() {
      this.getList()
    },
    methods: {
      // 获取列表
      async getList() {
        const res = await uni.gRequest.get('/app/demand/dlist', {
          type: 3,
          status: 3
        })
        this.userList = res.rows
      },
      gotoOrderDetail(id) {
        uni.navigateTo({
          url: '/pages/OrderDetail/OrderDetail?id=' + id
        })
      },
    },
  }
</script>

<style lang="scss">
  page {
    width: 100%;
    height: 100%;
    background-color: #fff;
  }

  .container {}

  .header1 {
    height: 286rpx;
    background-color: #fd5d29;
  }

  .body1 {
    background-color: white;
    padding: 30rpx;
    border-radius: 30rpx 30rpx 0 0;
    margin-top: -40rpx;
    padding-bottom: 200rpx;
  }

  .container {
    height: 100%;
  }

  .item1 {
    box-shadow: 0rpx 1rpx 20rpx 0rpx rgba(182, 182, 182, 0.15);
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    padding: 40rpx 30rpx;
    font-size: 26rpx;
    color: #999999;
    margin-bottom: 30rpx;


    .item-issue-time1 {
      padding: 0 0 40rpx;
      border-bottom: 1rpx #999 dotted;
    }

    .contact-people {
      display: block;
      padding: 40rpx 0 20rpx;
      font-size: 32rpx;
      color: #000000;
    }

    .item-main1 {
      font-size: 26rpx;
      color: #000000;
      display: flex;
      align-items: center;
      padding: 15rpx 0;

      image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 30rpx;
      }

      .item-userinfo1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 20rpx;
        color: #999999;

        text:first-child {
          font-weight: 500;
          font-size: 30rpx;
          color: #333333;
        }
      }
    }
  }

  .middle-image {
    width: 15rpx;
    height: 25rpx;
    margin-left: 13rpx
  }

  .header {
    height: 286rpx;
    background-color: #fd5d29;
    position: relative;
  }

  .tabs {
    position: absolute;
    bottom: 6rpx;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 30rpx;
    color: #FFDBCF;
    height: 100rpx;

    text {
      flex: 1;
      text-align: center;

      &.active {
        color: #FFFFFF;
        position: relative;
        line-height: 70rpx;

        &::after {
          content: '';
          display: block;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 69rpx;
          height: 6rpx;
          background-color: #fff;
          border-radius: 3rpx;
        }
      }
    }
  }

  .body {
    padding: 30rpx;

  }

  .item-box {
    padding: 0 20rpx;
    box-shadow: 0rpx 1rpx 20rpx 0rpx rgba(182, 182, 182, 0.15);
    border-radius: 10rpx 10rpx 10rpx 10rpx;
  }

  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx #eee solid;
    padding: 30rpx 0;
    font-size: 28rpx;
    color: #000000;

    &:last-child {
      border-bottom: none;
    }

    .item-right {
      position: relative;
      flex: 1;
      // justify-content: flex-end;

      image {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 12rpx;
        height: 22rpx;
      }

      .input {
        text-align: right;
        padding: 0 60rpx 0 40rpx;
      }
    }
  }
</style>
